<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>TodoWork!</title>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="mainpage.html">题单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="mainpage.html">题单<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Submit.html">提交题目</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">英语四级听力练习(计划开发)</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="AboutMe.html">我的发布</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Score.html">我的成绩</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle head" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
            选择试题
        </button>
        <button type="button" class="btn btn-primary chart">图形化数据</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

        </div>
    </div>
    <div class="showDataArea">

        <table class="table" style="margin-top: 10px">
            <thead>
            <tr>
                <th scope="col">日期</th>
                <th scope="col">得分</th>
            </tr>
            </thead>
            <tbody class="tbody">


            </tbody>

        </table>
        <div id="main" style="width: 100%;height:400px;">


        </div>


    </div>

    <div id="state">

    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/theme.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>


    var account = $.cookie('account');
    var datalist;
    var detailList;
    var index = -1
    inital();
    function inital() {
        $.ajax({
            type: 'post',
            url: '/GetIndividualScoreSubject',
            data:{
                'email':account,
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                datalist = data;
                drawnList()
            },
            error: function(data) { //失败的事件
                alert("获取数据失败，请联系管理员");
            }
        })
    }
    function drawnList() {
        for (let i = 0; i < datalist[0].length; i++) {
            $(".dropdown-menu").append("<a class=\"dropdown-item\" id='"+i+"'>"+datalist[0][i]+"</a>")
        }
    }
    $(".dropdown-menu").on("click",".dropdown-item",function () {

        index = parseInt($(this).attr('id'))
         $(".head").html(datalist[0][index])

        $.ajax({
            type: 'post',
            url: '/GetSubjectScore',
            data:{
                'code':datalist[1][index],
                'email':account
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                detailList = data;
                drawnDetailList()
            },
            error: function(data) { //失败的事件
                alert("获取详细分数失败");
            }
        })
    })
    
    function drawnDetailList() {
        $(".tbody").empty()
        for (let i = 0; i < detailList.length; i++) {
            var str = "                <tr>\n" +
                "                    <td>"+detailList[i].time+"</td>\n" +
                "                    <td>"+detailList[i].score+"</td>\n" +
                "                </tr>"
            $(".tbody").append(str)
        }

    }

    $(".chart").on("click",function () {
        $(".tbody").empty()
        if(index === -1){
            alert("选择试题");
            return false;
        }
        var myChart = echarts.init(document.getElementById('main'),"customed");

        var nameList = new Array(detailList.length);
        var scoreList = new Array(detailList.length);
        for (let i = 0; i < detailList.length; i++) {
            nameList[i] = detailList[i].time;
            scoreList[i] = detailList[i].score;
        }
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: datalist[0][index]
            },
            tooltip: {

            }, legend: {
                data:['分数']
            },
            xAxis: {
                type:'category',
                boundaryGap: false,
                data: nameList
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 分'
                },
                axisPointer: {
                    snap: true
                }
            },
            series: [{
                name: '分数',
                data: scoreList,
                smooth:true,
                type:'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    })
</script>




</body>
</html>